<template>
    <div>
        <el-dialog :title="form.id ? '编辑预约' : '新建预约'" width="600px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="user_id" label="客户名称">
                            <el-select v-model="form.user_id" :disabled="userDisabled" filterable remote placeholder="请选择" style="width: 100%;" :remote-method="getUserList">
                                <el-option v-for="item, index in userList" :key="index" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="times" label="预约时间">
                            <el-date-picker
                                v-model="form.times"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                type="datetime"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="type" label="预约类型">
                            <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item, index in typeOptions" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="remind_time" label="提醒时间">
                            <el-select v-model="form.remind_time" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item, index in remindTimeOptions" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { reservationCreate } from '@/api/reservation'
import { userList } from '@/api/kehu'
import { deepClone } from '@/util'
export default {
    name: 'ResvervationAddDialog',
    data() {
        return {
            dialogVisible: false,
            typeOptions: [
                { label: '来访', value: '1' },
                { label: '拜访', value: '2' },
                { label: '到会', value: '3' }
            ],
            remindTimeOptions: [
                { label: '不提醒', value: '1' },
                { label: '到时提醒', value: '2' },
                { label: '提前5分钟', value: '3' },
                { label: '提前15分钟', value: '4' },
                { label: '提前30分钟', value: '5' },
                { label: '提前1小时', value: '6' },
                { label: '提前2小时', value: '7' },
                { label: '提前1天', value: '8' }
            ],
            userList: [],
            userDisabled: false,
            form: {
                times: '',
                type: '',
                user_id: '',
                remind_time: ''
            },
            rules: {
                times: [{ required: true, message: '请预约时间', trigger: 'change' }],
                type: [{ required: true, message: '请选择预约类型', trigger: ['change', 'blur'] }],
                user_id: [{ required: true, message: '请选择客户名称', trigger: 'change' }],
                remind_time: [{ required: true, message: '请选择提醒时间', trigger: 'change' }]
            }
        }
    },
    methods: {
        showDialog(item) {
            this.dialogVisible = true;
            this.resetParams();
            this.resetForm();
            this.getUserList();
            if (item && item.id) {
                this.form = deepClone(item)
            }
            if (item.user_id) {
                this.$nextTick(() => {
                    this.form.user_id = item.user_id;
                    this.userDisabled = true
                })
            }
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                times: '',
                type: '',
                user_id: '',
                remind_time: ''
            };
            this.userDisabled = false;
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    reservationCreate(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('操作成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        },
        getUserList(query) {
            if (query !== '') {
                const params = { pages: 1, limit: 50, keys: query || '' };
                userList(params).then(res => {
                    this.userList = res.data.list
                })
            } else {
                this.userList = [];
            }
        }
    }
}
</script>